import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  normalizeStyle,
  Fragment,
  renderList,
  unref,
  createCommentVNode,
  createElementVNode,
  pushScopeId,
  popScopeId
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _withScopeId = n => (
  pushScopeId("data-v-cb5a5dc1"), (n = n()), popScopeId(), n
);
const _hoisted_1 = { class: "dv-decoration-1" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "x", "y", "width", "height"];
const _hoisted_4 = ["values", "begin"];
const _hoisted_5 = ["fill", "x", "y", "width", "height"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["values"];
const _hoisted_8 = ["values"];
const _hoisted_9 = ["values"];
const _hoisted_10 = ["fill", "x", "y", "height"];
const _hoisted_11 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode(
    "animate",
    {
      attributeName: "width",
      values: "0;40;0",
      dur: "2s",
      repeatCount: "indefinite"
    },
    null,
    -1
  )
);
const _hoisted_12 = ["values"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Decoration",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(200);
    const height = ref(60);
    const svgWH = ref([200, 50]);
    const svgScale = ref([1, 1]);
    const rowNum = ref(4);
    const rowPoints = ref(20);
    const halfPointSideLength = ref(Number(propValue.base.pointSideLength) / 2);
    const points = ref([]);
    const rects = ref([]);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
      calcSVGData();
    };
    const calcSVGData = () => {
      calcPointsPosition();
      calcRectsPosition();
      calcScale();
    };
    const calcPointsPosition = () => {
      const [w, h] = svgWH.value;
      const horizontalGap = w / (rowPoints.value + 1);
      const verticalGap = h / (rowNum.value + 1);
      let newPoints = new Array(rowNum.value)
        .fill(0)
        .map((_, i) =>
          new Array(rowPoints.value)
            .fill(0)
            .map((__, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
        );
      points.value = newPoints.reduce((all, item) => [...all, ...item], []);
    };
    const calcRectsPosition = () => {
      const rect1 = points.value[rowPoints.value * 2 - 1];
      const rect2 = points.value[rowPoints.value * 2 - 3];
      rects.value = [rect1, rect2];
    };
    const calcScale = () => {
      const [w, h] = svgWH.value;
      svgScale.value = [width.value / w, height.value / h];
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              width: `${svgWH.value[0]}px`,
              height: `${svgWH.value[1]}px`,
              style: normalizeStyle(
                `transform:scale(${svgScale.value[0]},${svgScale.value[1]});`
              )
            },
            [
              (openBlock(true),
              createElementBlock(
                Fragment,
                null,
                renderList(points.value, (point, i) => {
                  return (
                    openBlock(),
                    createElementBlock(
                      Fragment,
                      { key: i },
                      [
                        Math.random() > 0.6
                          ? (openBlock(),
                            createElementBlock(
                              "rect",
                              {
                                key: i,
                                fill: unref(propValue).base.color1,
                                x: point[0] - halfPointSideLength.value,
                                y: point[1] - halfPointSideLength.value,
                                width: unref(propValue).base.pointSideLength,
                                height: unref(propValue).base.pointSideLength
                              },
                              [
                                Math.random() > 0.6
                                  ? (openBlock(),
                                    createElementBlock(
                                      "animate",
                                      {
                                        key: 0,
                                        attributeName: "fill",
                                        values: `${
                                          unref(propValue).base.color1
                                        };transparent`,
                                        dur: "1s",
                                        begin: Math.random() * 2,
                                        repeatCount: "indefinite"
                                      },
                                      null,
                                      8,
                                      _hoisted_4
                                    ))
                                  : createCommentVNode("", true)
                              ],
                              8,
                              _hoisted_3
                            ))
                          : createCommentVNode("", true)
                      ],
                      64
                    )
                  );
                }),
                128
              )),
              rects.value[0]
                ? (openBlock(),
                  createElementBlock(
                    "rect",
                    {
                      key: 0,
                      fill: unref(propValue).base.color2,
                      x:
                        rects.value[0][0] -
                        unref(propValue).base.pointSideLength,
                      y:
                        rects.value[0][1] -
                        unref(propValue).base.pointSideLength,
                      width: unref(propValue).base.pointSideLength * 2,
                      height: unref(propValue).base.pointSideLength * 2
                    },
                    [
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "width",
                          values: `0;${
                            unref(propValue).base.pointSideLength * 2
                          }`,
                          dur: "2s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_6
                      ),
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "height",
                          values: `0;${
                            unref(propValue).base.pointSideLength * 2
                          }`,
                          dur: "2s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_7
                      ),
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "x",
                          values: `${rects.value[0][0]};${
                            rects.value[0][0] -
                            unref(propValue).base.pointSideLength
                          }`,
                          dur: "2s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_8
                      ),
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "y",
                          values: `${rects.value[0][1]};${
                            rects.value[0][1] -
                            unref(propValue).base.pointSideLength
                          }`,
                          dur: "2s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_9
                      )
                    ],
                    8,
                    _hoisted_5
                  ))
                : createCommentVNode("", true),
              rects.value[1]
                ? (openBlock(),
                  createElementBlock(
                    "rect",
                    {
                      key: 1,
                      fill: unref(propValue).base.color2,
                      x: rects.value[1][0] - 40,
                      y:
                        rects.value[1][1] -
                        unref(propValue).base.pointSideLength,
                      width: 40,
                      height: unref(propValue).base.pointSideLength * 2
                    },
                    [
                      _hoisted_11,
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "x",
                          values: `${rects.value[1][0]};${
                            rects.value[1][0] - 40
                          };${rects.value[1][0]}`,
                          dur: "2s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_12
                      )
                    ],
                    8,
                    _hoisted_10
                  ))
                : createCommentVNode("", true)
            ],
            12,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const Decoration = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-cb5a5dc1"]
]);
export { Decoration as default };
